<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>淘宝</title>
	<link rel="stylesheet" href="mytab.css">
</head>
<body>
	<div class = "wrapper">
		<div class = "content">
			<img src="logo.jpg" alt="">
			<div class = "big">
				<img src="1.jpg" alt="" class = "active">
				<img src="2.jpg" alt="">
				<img src="3.jpg" alt="">
				<img src="4.jpg" alt="">
				<img src="5.jpg" alt="">
				<img src="6.jpg" alt="">
				<img src="7.jpg" alt="">
			</div>
			<div class = "tiny">
				<ul>
					<li class = "current"><img src="11.jpg" alt=""></li>
					<li><img src="22.jpg" alt=""></li>
					<li><img src="33.jpg" alt=""></li>
					<li><img src="44.jpg" alt=""></li>
					<li><img src="55.jpg" alt=""></li>
					<li><img src="66.jpg" alt=""></li>
					<li><img src="77.jpg" alt=""></li>
				</ul>
			</div>
			<div class = "ad">
				<img src="logo-ad.png" alt="">
				<img src="close.png" alt="">
			</div>
		</div>
	</div>
	<script>
		var lis=document.querySelectorAll('li');
		var div=document.querySelector('.big');
		var bigimg=div.querySelectorAll('img');
		var close=document.querySelector('.ad');

		close.onclick=function(){
			var main=document.querySelector('.content');
			main.innerHTML='';
		}

		for (var i = 0; i < lis.length; i++) {
			lis[i].index=i;
			lis[i].onmouseover=function (argument) {
				// body...
				for (var i = 0; i < lis.length; i++) {
					lis[i].className='';
					bigimg[i].className='';
				}
				this.className='current';
				bigimg[this.index].className='active';
			}
		}
	</script>
</body>
</html>